<template>
  <div class="g-container">
    <p class="main_text">估价审核</p>
    <!-- 搜索 -->
    <div class="g-search">
      <!-- 时间选择区域 -->
      <span class="demonstration">提交时间：</span>
      <el-date-picker
        v-model="searchValue.startAt"
        type="date"
        placeholder="开始时间"
        @change="startTime"
        :clearable="false" />
      <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px">至</span>
      <el-date-picker
        v-model="searchValue.endAt"
        type="date"
        placeholder="结束时间"
        @change="endTime"
        :clearable="false" />
      &emsp;
      <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
        <el-radio label="1" size="large">今天</el-radio>
        <el-radio label="2" size="large">近7天</el-radio>
        <el-radio label="3" size="large">近30天</el-radio>
        <el-radio label="4" size="large">近3个月</el-radio>
        <el-radio label="5" size="large">近一年</el-radio>
      </el-radio-group>
      <!-- 信息区域 -->
      <div class="all_select">
        <!-- 店铺名称： -->
        <div class="input_valye">
          <span class="demonstration">厂商名称：</span>
          <input
            type="text"
            class="input"
            placeholder="请输入厂商名称"
            v-model="searchValue.companyName"
            @keyup.enter="search" />
        </div>
        <!-- 店铺ID： -->
        <div class="input_valye">
          <span class="demonstration">厂商ID：</span>
          <input
            type="text"
            class="input"
            placeholder="请输入厂商ID"
            v-model="searchValue.companyNode"
            @keyup.enter="search" />
        </div>
        <!-- 审核类型： -->
        <div class="input_valye">
          <span class="demonstration">审核状态：</span
          ><el-select v-model="searchValue.status" class="m-2" @change="search" placeholder="请选择状态">
            <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 底部按钮区域 -->
      <div class="bottom_btn">
        <el-button class="solid" @click="search">查询</el-button>
        <el-button class="hollow" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cyr-flex">
      <el-table
        :data="tableData"
        :header-cell-style="{'text-align': 'center', background: '#F2F7FC !important'}"
        border>
        <el-table-column prop="id" label="审核单号" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="companyName" label="提交厂商" align="center" :show-overflow-tooltip="true">
          <template #default="item">
            <el-text tag="span" style="cursor: pointer" @click="look(item.row)">{{ item.row.companyName }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="companyNode" label="厂商ID" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="applyReason" label="审核原因" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="applyAt" label="提交时间" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="auditAt" label="处理时间" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="auditStatus" label="审核状态" align="center" :show-overflow-tooltip="true">
          <template #default="item">
            <el-text v-if="item.row.auditStatus == 0" class="mx-1" type="primary"> • 未审核</el-text
            ><el-text v-if="item.row.auditStatus == 1" class="mx-1" type="success"> • 通过</el-text
            ><el-text v-if="item.row.auditStatus == 2" class="mx-1" type="warning"> • 未通过</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" class="operation">
          <template #default="item">
            <div class="table_btn">
              <el-button size="small" class="none" @click="look(item.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <smartPager
        v-model:current-page="searchValue.page"
        v-model:page-size="searchValue.rows"
        :total="total"
        @change="pageChange" />
    </div>
  </div>
  <!-- 站内信息 -->
  <div class="plateform" v-if="evaluateShow">
    <div class="title1">
      <div class="title_mes">查看估价审核</div>
      <span class="close" @click="maskBtn1">✖</span>
    </div>
    <div class="content1">
      <div class="list">
        <div class="list_box">审核单据号：{{ mes.id }}</div>
        <div class="list_box">审核厂商：{{ mes.companyName }}</div>
        <div class="list_box">厂商ID：{{ mes.companyNode }}</div>
        <div class="list_box">提交时间：{{ mes.applyAt }}</div>
        <div class="list_box">调价原因：{{ mes.applyReason }}</div>
      </div>
      <div class="table">
        <el-table :data="auditList" :span-method="objectSpanMethod" border style="width: 100%">
          <el-table-column prop="applyAt" label="更新日期" width="250" align="center">
            <template #header>
              <div class="custom-header">
                更新日期
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="每天调价一次，需要更新的估价最迟需在前一天下午5:00前提交到系统进行审核，审核通过后，统一在选择日期零点更新。"
                  placement="bottom">
                  <el-icon>
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <template #default="item">
              {{ item.row.updateAt }}
            </template>
          </el-table-column>
          <el-table-column prop="carType" label="类别" align="center" />
          <el-table-column label="吨位区间" align="center">
            <template #default="item"> {{ item.row.carWeightMin }} - {{ item.row.carWeightMax }} </template>
          </el-table-column>
          <el-table-column prop="prePrice" label="之前托运价（元）" align="center">
            <template #default="item">
              <span> {{ item.row.prePrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="applyPrice" label="更新托运价（元）" align="center">
            <template #default="item">
              <span> {{ item.row.applyPrice }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btn_center" v-if="btnShow">
        <el-button class="solid" @click="evaluateSure(1)">通过</el-button>
        <el-button class="hollow" @click="notPass">未通过</el-button>
      </div>
    </div>
  </div>
  <div class="audit" v-show="mask">
    <div class="title1">
      <div class="title_mes">审核未通过</div>
      <span class="close" @click="maskBtn1">✖</span>
    </div>
    <div class="content1">
      <div class="mes_title" style="margin-top: 40px; margin-bottom: 10px; color: #7e7e7e; font-size: 12px">
        请填写未通过原因
      </div>
      <el-input placeholder="请输入" v-model="rejectReason"></el-input>
      <!-- 按钮区域 -->
      <div class="btn_center">
        <el-button class="hollow" @click="maskBtn1">取消</el-button>
        <el-button class="solid" @click="evaluateSure(0)">确定</el-button>
      </div>
    </div>
  </div>
  <!-- 遮罩层 -->
  <div id="mask1" v-if="mask" @click="maskBtn1"></div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import moment from 'moment';
import {
  RequestValuationAuditList,
  RequestValuationAuditListDetail,
  RequestauditPriceApplyAudit,
} from '@/api/path/index.js';
import {ElMessage} from 'element-plus';
const tableData = ref<any>([]); // 表格列表
const mask = ref(false); //控制遮罩层显示
const order = ref<any>([]); //订单数组
const radio = ref('');
const replyShow = ref(false);
const evaluateShow = ref(false); //控制估价查看的显示
const getSpanArr = (data: any) => {
  mergeArr.value.forEach((key, index1) => {
    let count = 0; // 用来记录需要合并行的起始位置
    mergeObj.value[key] = []; // 记录每一列的合并信息
    data.forEach((item: any, index: number) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        mergeObj.value[key].push(1);
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === data[index - 1][key]) {
          console.log('測試', item.key);
          mergeObj.value[key][count] += 1;
          mergeObj.value[key].push(0);
        } else {
          // 如果当前行和上一行其值不相等
          count = index; // 记录当前位置
          mergeObj.value[key].push(1); // 重新push 一个 1
        }
      }
    });
  });
};
const mergeObj = ref<any>({});
const mergeArr = ref(['carType', 'applyAt', 'note']);
const objectSpanMethod = ({row, column, rowIndex, columnIndex}: any) => {
  if (columnIndex === 5) {
    if (rowIndex === 0) {
      return [tableData.value.length, 1];
    } else {
      return [0, 0];
    }
  }
  if (mergeArr.value.indexOf(column.property) !== -1) {
    if (mergeObj.value[column.property][rowIndex]) {
      return [mergeObj.value[column.property][rowIndex], 1];
    } else {
      return [0, 0];
    }
  }
};
/**
 * 表格颜色区分
 */
const tableRowClassName = ({row, rowIndex}: any) => {
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  }
};
// 挂载
onMounted(() => {
  requestValuationAuditList();
});
/**
 * 获取评论信息
 */
const total = ref(0);
const requestValuationAuditList = async () => {
  const a = await RequestValuationAuditList(searchValue.value);
  tableData.value = a.resultObj.list;
  total.value = a.resultObj.count;
};

/**
 * 搜索参数
 */
const searchValue = ref({
  startAt: '',
  endAt: '',
  companyNode: '',
  companyName: '',
  status: '',
  page: 1,
  rows: 10,
});
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
/**
 * 搜索
 */
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        requestValuationAuditList();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      // 表示两个时间填写了任意一个
      requestValuationAuditList();
    }
  }
};
/**
 * 重置
 */
const reset = () => {
  searchValue.value = {
    startAt: '',
    endAt: '',
    companyNode: '',
    companyName: '',
    status: '',
    page: 1,
    rows: 10,
  };
  radio.value = '';
  requestValuationAuditList();
};

/**
 * 等级选择器
 */
const status_options = [
  {
    value: 0,
    label: '未审核',
  },
  {
    value: 1,
    label: '通过',
  },
  {
    value: 2,
    label: '未通过',
  },
];
/**
 * 点击通过审核
 */
const rejectReason = ref();
const evaluateSure = async (value: number) => {
  if (value != 0) {
    rejectReason.value = null;
  }
  // result0拒绝，1同意
  const a = await RequestauditPriceApplyAudit({
    applyId: mes.value.id,
    result: value,
    companyNode: mes.value.companyNode,
    rejectReason: rejectReason.value,
  });
  if (a.msg == '操作成功！') {
    maskBtn1();
    ElMessage.success('操作成功！');
    rejectReason.value = null;
    mask.value = false;
    requestValuationAuditList();
  } else {
    ElMessage.error('操作失败！请重试');
  }
};
const notPass = () => {
  mask.value = true;
  evaluateShow.value = false;
};
/**
 * 点击查看
 */
const btnShow = ref(false);
const mes = ref<any>();
const auditList = ref<any>([]); //审核表格
const look = async (item: any) => {
  evaluateShow.value = true;
  mask.value = true;
  if (item.auditStatus == 0) {
    btnShow.value = true;
  } else {
    btnShow.value = false;
  }
  auditList.value = [];
  const a = await RequestValuationAuditListDetail(item.id);
  mes.value = a.resultObj.applyInfo;
  for (let i = 0; i < a.resultObj.applyList.length; i++) {
    auditList.value = auditList.value.concat(a.resultObj.applyList[i]);
  }
  getSpanArr(auditList.value);
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  // searchValue.value.page = val;
  requestValuationAuditList();
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
  replyShow.value = false;
  evaluateShow.value = false;
  btnShow.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.g-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.audit {
  width: 400px;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 25%;
  left: 30%;
  z-index: 99;

  .btn_center {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}

/**
 * 查看审核
 */
.plateform {
  width: 70%;
  height: 85%;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 7.5%;
  left: 15%;

  .content1 {
    height: calc(100% - 140px);
    overflow-y: scroll;
  }

  .mes {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .text {
      display: inline-block;
      width: 60px;
      font-size: 14px;
      color: #6c6c6c;
    }
  }

  .list {
    width: 100%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .list_box {
      width: 31%;
      font-size: 14px;
      color: #3d3d3d;
      line-height: 22px;
      margin-right: 2%;
      margin-bottom: 14px;
    }

    .list_box:last-child {
      width: auto;
    }
  }
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.nav_ul {
  width: 100%;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navlist {
    .number {
      background: #116cf8;
      color: #fff;
    }
  }
}

:deep(.el-input__wrapper) {
  width: 150px;
}

:deep(.el-drawer.rtl) {
  background: #f5f9ff;
  width: 600px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

.table {
  .el-table .warning-row {
    background: #f2f7fc;
  }

  .nav_ul {
    width: 100%;

    .nav_li {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav_lis {
      position: relative;

      .number {
        padding: 0 5px;
        display: block;
        line-height: 16px;
        height: 16px;
        color: #fff;
        font-size: 12px;
        background: #409eff;
        border-radius: 8px;
        position: absolute;
        top: 2px;
        right: -12px;
      }
    }

    .navlist {
      .number {
        background: #409eff;
        color: #fff;
      }
    }
  }
}
</style>
